<template>
    <div class="activity-contain">
        <div class="header">
            <p>新增课程</p>
        </div>
        <div class="main">
            <el-form :model="information" :rules="rules" ref="information" label-width="120px" class="">
                <el-form-item label="房车车型：" prop="rvName">
                    <el-input v-model="information.rvName" placeholder="请输入活动标题"></el-input>
                </el-form-item>
                <el-form-item label="简述：" prop="resume">
                    <el-input v-model="information.resume" placeholder="请输入活动标题"></el-input>
                </el-form-item>
                <el-form-item label="封面：" prop="picMasterKey">
                    <el-upload  list-type="picture-card"
                                :http-request="myUpload"
                                :action="upLoadUrl"
                                :class="{uploadShow:uploadShow1}"
                                :file-list='fileShowList1'
                                :on-remove="handleRemove1"
                                :before-upload="beforeAvatarUpload1">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="图片：" prop="picIds">
                    <el-upload  list-type="picture-card"
                                :http-request="myUpload"
                                :action="upLoadUrl"
                                :class="{uploadShow:uploadShow}"
                                :file-list='fileShowList'
                                :on-remove="handleRemove"
                                :before-upload="beforeAvatarUpload" multiple>
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="地区：" prop="cityCode">
                    <el-select placeholder="省份" @change="provinceChange"  filterable v-model="information.provinceCode" >
                        <el-option
                                v-for="item in provinceList"
                                :key="item.codeId"
                                :label="item.codeName"
                                :value="item.codeId">
                        </el-option>
                    </el-select>
                    <el-select placeholder="城市"  filterable v-model="information.cityCode" >
                        <el-option
                                v-for="item in cityList"
                                :key="item.codeId"
                                :label="item.codeName"
                                :value="item.codeId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否热门：" prop="isHot ">
                    <el-select placeholder="请选择"  filterable v-model="information.isHot" >
                        <el-option label="是" value="1" ></el-option>
                        <el-option label="否" value="" ></el-option>
                    </el-select>
                </el-form-item>
                <div class="car-info">
                    <div class="car-list">
                        <el-form-item label="日租价格：" prop="priceDay">
                            <el-input  v-model="information.priceDay"  placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="月租价格：" prop="priceMonth">
                            <el-input  v-model="information.priceMonth"  placeholder="请输入"></el-input>
                        </el-form-item>
                    </div>
                    <div class="car-list">
                        <el-form-item label="状态：" prop="status">
                            <el-select placeholder="请选择"  filterable v-model="information.status" >
                                <el-option label="上架" value="on"></el-option>
                                <el-option label="下架" value="off"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="座位数：" prop="setNum">
                            <el-input  v-model="information.setNum"  placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="最高时速：" prop="maxSpeed">
                            <el-input  v-model="information.maxSpeed"  placeholder="请输入"></el-input>
                        </el-form-item>
                    </div>
                    <div class="car-list">
                        <el-form-item label="最大行驶里程：" prop="maxDriverRouter">
                            <el-input  v-model="information.maxDriverRouter"  placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="排量：" prop="outputVolume">
                            <el-input  v-model="information.outputVolume"  placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="变速箱：" prop="gearBox">
                            <el-select placeholder="请选择"  filterable v-model="information.gearBox " >
                                <el-option label="自动" value="自动"></el-option>
                                <el-option label="手动" value="手动"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="car-list">
                        <el-form-item label="驾驶证：" prop="driverLicense">
                            <el-input  v-model="information.driverLicense"  placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="核载人数：" prop="loadNum">
                            <el-input  v-model="information.loadNum"  placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="床数：" prop="bedNum">
                            <el-input  v-model="information.bedNum"  placeholder="请输入"></el-input>
                        </el-form-item>
                    </div>
                    <div class="car-list">
                        <el-form-item label="级别：" prop="rvLevel">
                            <el-input  v-model="information.rvLevel"  placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="长宽高：" prop="rvSize">
                            <el-input  v-model="information.rvSize"  placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="车身结构：" prop="construction">
                            <el-input  v-model="information.construction"  placeholder="请输入"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <el-form-item label="描述：" prop="rvDesc">
                    <el-input
                            type="textarea"
                            :rows="4"
                            placeholder="请输入内容"
                            v-model="information.rvDesc">
                    </el-input>
                </el-form-item>
                <el-form-item label="详情：" prop="contents">
                    <bg-editor
                            :minHeight="300"
                            :uploadUrl="upLoadUrl"
                            :content="information.contents"
                            @editorData='editorInfo'>
                    </bg-editor>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('information')" >保存</el-button>
                    <el-button @click="$router.push('/')" type="primary" >返回</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    let CONSTANT = require('../../constant/constant.js');
    let common = require("../../common.js");
    export default {
        data() {
            return {
                id:'',
                upLoadUrl:'',
                dialogImageUrl:'',
                information: {
                    id:'',
                    picIds:[],
                    isHot:'',
                    rvName:'',
                    contents:'',
                    resume:'',
                    provinceCode:'',
                    provinceName:'',
                    cityName:'',
                    cityCode:'',
                    priceDay:'',
                    priceMonth:'',
                    setNum:'',
                    maxDriverRouter:'',
                    outputVolume:'',
                    gearBox:'',
                    driverLicense:'',
                    picMasterId:'',
                    loadNum:'',
                    bedNum:'',
                    rvLevel:'',
                    rvSize:'',
                    maxSpeed:'',
                    rvDesc:'',
                    construction:'',
                },
                uploadShow1:false,
                uploadShow:false,
                dialogVisible:false,
                fileShowList:[],
                fileShowList1:[],
                takeoutId:'',
                rules: {
                    rvName: [
                        { required: true, message: '请输入房车车型', trigger: 'blur' },
                        { min: 1, max: 35, message: '长度在 1 到 35 个字', trigger: 'blur' }
                    ],
                    resume: [
                        { required: true, message: '请输入简述', trigger: 'blur' },
                        { min: 1, max: 50, message: '长度在 1 到 50 个字', trigger: 'blur' }
                    ],
                    picMasterId:[
                        {required: true, message: '请上传图片', trigger: 'change'  }
                    ],
                    picIds:[
                        {required: true, message: '请上传图片', trigger: 'change'  }
                    ],
                    isHot:[
                        {required: true, message: '请选择是否热门', trigger: 'change'  }
                    ],
                    cityCode:[
                        {required: true, message: '请选择省市', trigger: 'change'  }
                    ],
                    priceDay:[
                        {required: true, message: '请填写日租价格', trigger: 'change'  }
                    ],
                    priceMonth: [
                        { required: true, message: '请填写月租价格', trigger: 'change' },
                    ],
                    status :[
                        { required: true, message: '请填选择状态', trigger: 'change' },
                    ]
                },
                provinceList:[],
                cityList:[],
                imageUrl:''
            };
        },
        components:{
            'bg-editor':()=>import('../common/bg-editor.vue')
        },
        watch:{
            'information.provinceCode':function(val){
                this.provinceList.map((item)=>{
                    if(item.codeId == val){
                        this.information.provinceName = item.codeName
                    }
                })
                this.cityList = [];
                this.getCityList()
            },
            'information.cityCode':function(val){
                this.cityList.map((item)=>{
                    if(item.codeId == val){
                        this.information.cityName  = item.codeName
                    }
                })
            },
        },
        created(){
            this.getProvince()

        },
        mounted() {
            this.id  = this.$router.currentRoute.query.id;
            this.takeoutId = this.$router.currentRoute.query.id;
            if(this.takeoutId){
                this.getFoodDetail();
            }
        },
        methods: {
            provinceChange(){
                this.information.cityName = ''
                this.information.cityCode  = ''
            },
            getProvince:function(){
                let url = CONSTANT.URL.COMMON.GETPROVINCELIST,
                    data={}
                common.requestAjax(url,{},data,(res)=>{
                        if(res.status == 200){
                            this.provinceList = res.data.bussData;
                        }
                    }
                )
            },
            getCityList:function(){
                let url = CONSTANT.URL.COMMON.GETCITYLIST+'/'+this.information.provinceCode,
                    data={}
                common.requestAjax(url,{},data,(res)=>{
                        if(res.status == 200){
                            this.cityList = res.data.bussData;
                            console.log(this.information)
                        }
                    }
                )
            },
            beforeAvatarUpload(file) {
                console.log(file);
                const isLt2M = file.size / 1024 / 1024 < 2;
                let url =CONSTANT.URL.COMMON.UPLOAD;
                let param = {
                    suffix:file.name.split(".")[1],   // 文件后缀  png
                    contentType:file.type             // 文件类型  image/png
                }
                common.requestAjax(url,param,null,(res)=> {
                    this.upLoadUrl = res.data.bussData.uploadUrl;
                    this.information.picIds.push(res.data.bussData.fileKey);
                    let downloadUrl =   res.data.bussData.downloadUrl;
                    common.uploadFile(this.upLoadUrl,file,file.type,(res)=>{
                        this.fileShowList.push({
                            url:downloadUrl
                        })
                        if(this.fileShowList.length>9){
                            this.uploadShow = true;
                        }
                    })
                });
            },
            beforeAvatarUpload1(file) {
                console.log(file);
                const isLt2M = file.size / 1024 / 1024 < 2;
                let url =CONSTANT.URL.COMMON.UPLOAD;
                let param = {
                    suffix:file.name.split(".")[1],   // 文件后缀  png
                    contentType:file.type             // 文件类型  image/png
                }
                common.requestAjax(url,param,null,(res)=> {
                    this.upLoadUrl = res.data.bussData.uploadUrl;
                    this.information.picMasterId = res.data.bussData.fileKey;
                    let downloadUrl =   res.data.bussData.downloadUrl;
                    common.uploadFile(this.upLoadUrl,file,file.type,(res)=>{
                        this.fileShowList1.push({
                            url:downloadUrl
                        })
                        this.uploadShow1 = true;
                    })
                });
            },
            myUpload(content) {
                // 重写覆盖上传方法
            },
            getFoodDetail:function(){
                let url = CONSTANT.URL.CAR.FINDCARINFOBYID,
                    data={
                        id:this.takeoutId
                    }
                common.requestAjax(url,JSON.stringify(data),null,(res)=>{
                    if(res.status == 200){
                        let data = res.data;
                        let info = data.bussData;
                        this.information=info;
                        this.information.provinceCode = JSON.parse(info.provinceCode)
                        this.information.cityCode = JSON.parse(info.cityCode)
                        let arr = info.picIds.split(',');
                        arr.map((item)=>{
                            this.fileShowList.push({
                                url:item
                            })
                        })
                        this.fileShowList1.push({
                            url:info.picMasterId
                        })
                        if(this.fileShowList.length>9){
                            this.uploadShow = true;
                        }
                        this.uploadShow1 = true;
                        this.information.picMasterId = info.picMasterKey;
                        this.information.picIds = info.picKeys.split(',');
                    }
                })
            },
            handleRemove(file, fileList) {
                let deleteUrl = file.url;
                let list = this.fileShowList;
                list.forEach((item,index)=>{
                    if(item.url == deleteUrl){
                        list.splice(index,1);
                        this.information.picIds.splice(index,1)
                    }
                })
                if(list.length<9){
                    this.uploadShow = false;
                }
                this.fileShowList = list;
            },
            handleRemove1(file, fileList) {
                this.uploadShow1 = false;
                this.fileShowList1 = [];
                this.information.picMasterId = ''
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleFileSuccess(res, file) {
                if(res.status == 200){
                    let picItem = res.data.bussData;
                    this.information.images.push(picItem);
                    if(this.information.images.length>=8){
                        this.uploadShow = true;
                    }
                }
            },
            editorInfo(val){
                this.information.contents = val;
            },
            submitForm(formName) {
                console.log(this.information.picIds.join(','))
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.information.picIds = this.information.picIds.join(',')
                        let url = CONSTANT.URL.CAR.SAVECARINFO;
                        let param = JSON.stringify(this.information);
                        common.requestAjax(url, param, null, res => {
                            if(res.status == 200) {
                                this.$message({
                                    type: 'success',
                                    message: '保存成功!'
                                });
                                this.$router.push("/");
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: res.msg
                                });
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        }
    }
</script>

<style lang="scss" scoped >
    .activity-contain {
        .header{
            height: 46px;
            padding-bottom: 10px;
            border-bottom: 1px solid #dedede;
            p{ float: left;height: 36px;line-height: 36px;margin: 0 0 0 10px;font-size: 18px;}
            .el-button{
                float: right;
                margin-right: 5%
            }
        }
        .tip-img{
            font-size: 12px;
            color:red;
        }
        .main {
            // width:500px;
            //max-width: 1500px;
            .el-textarea{
                width: 60%;
            }
            .car-info{
                .car-list{
                    overflow: hidden;
                    .el-form-item{
                        float: left;
                        .el-input,.el-select{
                            width: 150px;
                        }
                    }
                }
            }
            margin: 20px 0 0 40px;
            clear: both;
            .el-input,
            .el-select {
                width: 250px;
            }
            .modal-body{
                .note-image-input{
                    display: block;
                }
            }
        }
    }
</style>
<style>
    .distpicker-address-wrapper select{
        margin-right: 20px;
    }
    .panel-heading{
        position: relative!important;
    }
    .note-toolbar{
        z-index: 10!important;
    }
    .uploadShow  .el-upload{display: none;}
</style>

